<template>
  <div class="kui-content-wrap">
    <div class="kui-wrap-desk kui-flex kui-flex-between kui-flex-middle">
      <Breadcrumb class="kui-desk-nav">
        <BreadcrumbItem to="/">我的工作台</BreadcrumbItem>
        <BreadcrumbItem to="/customer">客户管理</BreadcrumbItem>
        <BreadcrumbItem>新增客户</BreadcrumbItem>
      </Breadcrumb>
    </div>
    <div class="kui-wrap-body">
      <div class="kui-body-section">
        <div class="kui-section-item">
          <div class="kui-item-bd">
            <Form class="kui-form-panel" ref="formData" :rules="ruleValidate"  :model="temporaryData" :label-width="120" label-position="left">
              <FormItem label="客户编号：" prop="no">
                <Input v-model="temporaryData.no" clearable  placeholder="请输入客户编号"/>
              </FormItem>
              <FormItem label="客户名字：" prop="name">
                <Input v-model="temporaryData.name" clearable  placeholder="请输入客户名字"/>
              </FormItem>
              <FormItem label="联系人名字：" prop="linkman">
                <Input v-model="temporaryData.linkman" clearable placeholder="请输入联系人名字"/>
              </FormItem>
              <FormItem label="联系电话：" prop="phone">
                <Input v-model="temporaryData.phone" clearable placeholder="请输入11位手机号"/>
              </FormItem>
              <FormItem label="备用手机：">
                <Input v-model="temporaryData.mobile" clearable placeholder="请输入11位手机号"/>
              </FormItem>
              <FormItem label="状态：">
                <RadioGroup v-model="temporaryData.state">
                  <Radio :label="-1">锁定</Radio>
                  <Radio :label="1">正常</Radio>
                </RadioGroup>
              </FormItem>
              <FormItem label="地址：">
                <Input v-model="temporaryData.address" clearable placeholder="请输入客户地址"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="clickPostData">保存新增</Button>
              </FormItem>
            </Form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      temporaryData: {
        state: 1
      },
      ruleValidate: {
                    no: [
                        { required: true, message: '请输入客户编号', trigger: 'blur' }
                    ],
                    name: [
                        { required: true, message: '请输入客户名字', trigger: 'blur' }
                    ],
                    linkman: [
                        { required: true, message: '请输入联系人名字', trigger: 'blur' }
                    ],
                    phone: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ]
                }
    }
  },
  methods: {
    //链接数据
    async postData(list) {
      const app = this
      let { data } = await app.$axios.post('/master/v1/customer', list)
      if (data.code === 100) {
        app.$Message.success('保存成功')
        app.$router.push('/customer')
      } else {
        app.$Message.error(data.msg)
      }
    },
    clickPostData() {
      this.postData(this.temporaryData)
      this.temporaryData = {
        state: 1
      }
    },
    cancel() {
      this.temporaryData = {}
    }
  },
}
</script>

<style lang="less" scoped></style>
